import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Modal,
  message,
  Badge,
  Divider,
  Tabs,
  Table,
} from 'antd';
import GeneralTableComponent from 'components/GeneralTableComponent';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
const {  RangePicker} = DatePicker;
import styles from './TableList.less';
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const { Option } = Select;


@connect(({ channelConversion, loading }) => ({
  channelConversion,
  loading: loading.effects['channelConversion/fetchGetChannelConversion'],
}))
@Form.create()
export default class ChannelConversion extends PureComponent {
  state = {
    paramList: {
      pageNo: 1,
      source: 'up',
      startTime:'',
      endTime: '',
      channelName: '',
    },
  };
  componentDidMount() {
    const { paramList } = this.state;
    paramList.startTime = moment(Date.parse(new Date())).format('YYYY-MM-DD hh:mm:ss');
    paramList.endTime = moment(Date.parse(new Date())).format('YYYY-MM-DD hh:mm:ss');
    this.getChannelConversionData();
    this.getTotalConversionData();
  }

  getChannelConversionData = () => {
    const { dispatch } = this.props;
    const { paramList } = this.state
    let postParam = {
      pageNo: paramList.pageNo,
      endTime: paramList.endTime,
      startTime: paramList.startTime,
      channelName: paramList.channelName,
    }
    if (paramList.source) {
      postParam.source = paramList.source
    }
    dispatch({
      type: 'channelConversion/fetchGetChannelConversion',
       payload:{
       ...postParam
       }
    });
  }

  getTotalConversionData = () => {
    const { dispatch } = this.props;
    const { paramList } = this.state;
    let postParam = {
      endTime: paramList.endTime,
      startTime: paramList.startTime,
    }
    if (paramList.source) {
      postParam.source = paramList.source
    }
    dispatch({
      type: 'channelConversion/fetchGetTotalChannelConversion',
      payload:{
        ...postParam
      }
    });
  }

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { dispatch } = this.props;
    const { formValues, paramList } = this.state;
    paramList.pageNo = pagination.current;
    this.getChannelConversionData();
  };


  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    const { paramList } = this.state
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      paramList.channelName = fieldsValue.channelName ? fieldsValue.channelName: '';
      paramList.startTime = moment(fieldsValue.shouldRepayTime[0]).format('YYYY-MM-DD hh:mm:ss');
      paramList.endTime = moment(fieldsValue.shouldRepayTime[1]).format('YYYY-MM-DD hh:mm:ss');
      this.getChannelConversionData();
      this.getTotalConversionData();
    });
  };

  handleFormReset = () => {
    const { form } = this.props;
    const { paramList } = this.state;
    form.resetFields();
    paramList.startTime = moment(Date.parse(new Date())).format('YYYY-MM-DD hh:mm:ss');
    paramList.endTime = moment(Date.parse(new Date())).format('YYYY-MM-DD hh:mm:ss');
    paramList.channelName ='';
    this.getChannelConversionData();
    this.getTotalConversionData();
  };

  // handleTabChange = (val) => {
  //   const { paramList } = this.state
  //   paramList.source = val == 'all' ? '' : val;
  //   this.getChannelConversionData();
  //   this.getTotalConversionData();
  // };

  renderSimpleForm() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const defaultSelectDate = {
      startDate: moment().startOf('day').subtract(0, 'days'),
      endDate:moment().startOf('day').subtract(0, 'days'),
    }
    return (
      <Card bordered={false}>
          <Form onSubmit={this.handleSearch} layout="inline">
            <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
              <Col md={10} sm={12}>
                <FormItem label="日期">
                  {getFieldDecorator('shouldRepayTime',{
                    initialValue: [defaultSelectDate.startDate, defaultSelectDate.endDate]
                  })(<RangePicker />)}
                </FormItem>
              </Col>
              <Col md={6} sm={24}>
                <FormItem label="渠道名称">
                  {getFieldDecorator('channelName')(<Input placeholder="请输入" />)}
                </FormItem>
              </Col>
              <Col md={8} sm={24}>
              <span className={styles.submitButtons}>
                <Button type="primary" htmlType="submit" >
                  查询
                </Button>
                <Button style={{marginLeft:12}} onClick={this.handleFormReset}>
                  清除
                </Button>
              </span>
              </Col>
            </Row>
          </Form>

      </Card>

    );
  }
  render() {
    const { channelConversion: { channelConverData,getTotalData }, loading} = this.props;
    const tableColumns = [
      {
        title: '产品类型',
        dataIndex: 'source',
        render: (text, record) => (
          <span>{text == 'up' ? 'sdfz' : text }</span>
          // <span>{text == 'up' ? 'sdfz' : ( text == 'xflower' ? '信花花' : ( text == 'xbeauty' ? '想美' : text ) )}</span>
        )
      },
      {
        title: '渠道名',
        dataIndex: 'channelName',

      },
      {
        title: '上线日期',
        dataIndex: 'createTime',

      },
      {
        title: '下线日期',
        dataIndex: 'downTime',

      },
      {
        title: '流览量',
        dataIndex: 'clickNum',
        render: val => `${val}`
      },
      {
        title: '注册成功',
        dataIndex: 'registerNum',
        render: val => `${val}`
      },
      {
        title: '登录成功',
        dataIndex: 'loginNum',
        render: val => `${val}`
      },
      {
        title: '认证通过',
        dataIndex: 'riskNum',
        render: val => `${val}`
      },
      {
        title: '会员购买',
        dataIndex: 'memberNum',
        render: val => `${val}`
      },
      {
        title: '放款成功',
        dataIndex: 'paymentNum',
        type: 'longString',
        render: val => `${val}`
      },
      {
        title: '借款本金',
        dataIndex: 'totalItemAmount',
        type: 'totalItemAmount',
        render: val => `${val}元`
      },
      {
        title: '已还款金额',
        dataIndex: 'totalRepayAmount',
        type: 'totalRepayAmount',
        render: val => `${val}元`
      },
      {
        title: '正常提前还款金额',
        dataIndex: 'totalNormalRepayAmount',
        type: 'totalNormalRepayAmount',
        render: val => `${val}元`
      },
      {
        title: '逾期一天回款金额',
        dataIndex: 'totalOverdueOneDayRepayAmount',
        type: 'totalOverdueOneDayRepayAmount',
        render: val => `${val}元`
      },
      {
        title: '逾期2-7天回款金额',
        dataIndex: 'totalOverdueTwoDayRepayAmount',
        type: 'totalOverdueTwoDayRepayAmount',
        render: val => `${val}元`
      },
      {
        title: 'M1回款金额',
        dataIndex: 'totalOverdueM1RepayAmount',
        type: 'totalOverdueM1RepayAmount',
        render: val => `${val}元`
      },
      {
        title: 'M1在逾金额',
        dataIndex: 'totalOverdueM1NOTRepayAmount',
        type: 'totalOverdueM1NOTRepayAmount',
        render: val => `${val}元`
      },
    ]
    const totalColumns =[
      {
        title: '流览量',
        dataIndex: 'clickNum',
        render: val => `${val}`
      },
      {
        title: '注册成功',
        dataIndex: 'registerNum',
        render: val => `${val}`
      },
      {
        title: '登录成功',
        dataIndex: 'loginNum',
        render: val => `${val}`
      },
      {
        title: '认证通过',
        dataIndex: 'riskNum',
        render: val => `${val}`
      },
      {
        title: '会员购买',
        dataIndex: 'memberNum',
        render: val => `${val}`
      },
      {
        title: '放款成功',
        dataIndex: 'paymentNum',
        type: 'longString',
        render: val => `${val}`
      },
      {
        title: '借款本金',
        dataIndex: 'totalItemAmount',
        type: 'totalItemAmount',
        render: val => `${val}元`
      },
      {
        title: '已还款金额',
        dataIndex: 'totalRepayAmount',
        type: 'totalRepayAmount',
        render: val => `${val}元`
      },
      {
        title: '正常提前还款金额',
        dataIndex: 'totalNormalRepayAmount',
        type: 'totalNormalRepayAmount',
        render: val => `${val}元`
      },
      {
        title: '逾期一天回款金额',
        dataIndex: 'totalOverdueOneDayRepayAmount',
        type: 'totalOverdueOneDayRepayAmount',
        render: val => `${val}元`
      },
      {
        title: '逾期2-7天回款金额',
        dataIndex: 'totalOverdueTwoDayRepayAmount',
        type: 'totalOverdueTwoDayRepayAmount',
        render: val => `${val}元`
      },
      {
        title: 'M1回款金额',
        dataIndex: 'totalOverdueM1RepayAmount',
        type: 'totalOverdueM1RepayAmount',
        render: val => `${val}元`
      },
      {
        title: 'M1在逾金额',
        dataIndex: 'totalOverdueM1NOTRepayAmount',
        type: 'totalOverdueM1NOTRepayAmount',
        render: val => `${val}元`
      },
    ];

    let _arr =[];
    getTotalData? _arr.push(getTotalData): ''
    return (
      <PageHeaderLayout title="渠道统计">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderSimpleForm()}</div>
            <Table  loading={loading} dataSource={_arr} columns={totalColumns} pagination={false} rowKey={record => record.clickNum} style={{marginBottom:20}}/>
            <GeneralTableComponent
              loading={loading}
              data={channelConverData}
              columns={tableColumns}
              onChange={this.handleStandardTableChange}
              rowKey={'channelName'}
            />
          </div>
        </Card>

      </PageHeaderLayout>
    );
  }
}
